<template>
  <div>
    <div style="display: flex">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        v-show="showInput"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
      >
        <Poptip
          slot="append"
          transfer
          trigger="hover"
          title="图片预览"
          placement="right"
        >
          <Icon type="md-eye" class="see-icon" />
          <div slot="content">
            <img
              :src="currentValue"
              alt="该资源不存在"
              style="width: 100%; margin: 0 auto; display: block"
            />
            <a
              @click="viewImage = true"
              style="margin-top: 5px; text-align: right; display: block"
              >查看大图</a
            >
          </div>
        </Poptip>
      </Input>

      <Upload
        :action="uploadFileUrl"
        :data="this.ossBody"
        :on-success="handleSuccess"
        :on-error="handleError"
        :format="['jpg', 'jpeg', 'png', 'gif', 'bmp']"
        accept=".jpg, .jpeg, .png, .gif, .bmp"
        :max-size="1024"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="OssPolicy"
        :show-upload-list="false"
        ref="up"
        class="upload"
      >
        <Button :loading="loading" :size="size" :disabled="disabled"
          >上传图片</Button
        >
      </Upload>
    </div>

    <Modal
      title="图片预览"
      v-model="viewImage"
      :styles="{ top: '30px' }"
      draggable
    >
      <img
        :src="currentValue"
        alt="该资源不存在"
        style="width: 100%; margin: 0 auto; display: block"
      />
      <div slot="footer">
        <Button @click="viewImage = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { uploadFile } from '@/api/index';
import { getUUID } from '@/libs/util';
import * as ApiOss from '@/api/myapi/Oss';
export default {
  name: 'uploadPicInput',
  props: {
    value: String,
    size: {
      default: 'default',
      type: String,
    },
    placeholder: {
      type: String,
      default: '图片链接',
    },
    showInput: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    maxlength: Number,
    icon: {
      type: String,
      default: 'ios-cloud-upload-outline',
    },
  },
  data() {
    return {
      accessToken: {}, // 验证token
      currentValue: this.value, // 当前值
      loading: false, // 加载状态
      viewImage: false, // 预览图片modal
      uploadFileUrl: 'http://xmut-mall.oss-cn-hangzhou.aliyuncs.com', // 上传地址
      ossBody: {
        policy: '',
        signature: '',
        ossaccessKeyId: '',
        key: '',
        dir: '',
        host: '',
      }, // oss签名上传所需的请求体`
    };
  },
  methods: {
    OssPolicy(file) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        ApiOss.policy()
          .then((res) => {
            if (res.data.code == 0) {
              this.ossBody.policy = res.data.data.policy;
              this.ossBody.signature = res.data.data.signature;
              this.ossBody.ossaccessKeyId = res.data.data.accessid;
              this.ossBody.dir = res.data.data.dir;
              this.ossBody.key = res.data.data.dir + getUUID() + file.name;
              this.ossBody.host = res.data.data.host;
              this.loading = false;
              resolve(true);
            } else {
              this.$Message.error('网络拥堵');
              this.loading = false;
              return false;
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log('出错', err);
            reject(false);
          });
      });
    },
    // 初始化
    init() {
      this.accessToken = {
        accessToken: this.getStore('accessToken'),
      };
    },
    // 格式校验
    handleFormatError(file) {
      this.loading = false;
      this.$Notice.warning({
        title: '不支持的文件格式',
        desc:
          '所选文件‘ ' +
          file.name +
          ' ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件',
      });
    },
    // 大小校验
    handleMaxSize(file) {
      this.loading = false;
      this.$Notice.warning({
        title: '文件大小过大',
        desc: '所选文件大小过大, 不得超过1M.',
      });
    },
    // 上传前
    beforeUpload() {
      this.loading = true;
      return true;
    },
    // 上传成功
    handleSuccess(res, file) {
      this.$Message.success('上传成功');
      this.loading = false;
      let fileName =
        this.ossBody.host +
        '/' +
        this.ossBody.key.replace('${filename}', file.name);
      this.currentValue = fileName;
      this.$emit('input', this.currentValue);
      this.$emit('on-change', this.currentValue);
      // if (res.success) {
      //   this.currentValue = res.result;
      //   this.$emit("input", this.currentValue);
      //   this.$emit("on-change", this.currentValue);
      // } else {
      //   // this.$Message.error(res.message);
      // }
    },
    // 上传失败
    handleError(error, file, fileList) {
      this.loading = false;
      this.$Message.error(error.toString());
    },
    // 上传成功回显
    handleChange(v) {
      this.$emit('input', this.currentValue);
      this.$emit('on-change', this.currentValue);
      this.$attrs.rollback && this.$attrs.rollback();
    },
    // 初始值
    setCurrentValue(value) {
      if (value === this.currentValue) {
        return;
      }
      this.currentValue = value;
      this.$emit('on-change', this.currentValue);
    },
  },
  watch: {
    value(val) {
      console.log('测试val', val);
      this.setCurrentValue(val);
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.see-icon {
  font-size: 16px;
  cursor: pointer;
}

.upload {
  display: inline-block;
  margin-left: 10px;
}
</style>
